<template>
  <div class="intelligent">
    <section class="info">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple"></div>
        </el-col>
      </el-row>
    </section>
    <section class="topology">
      <div ref="dom"></div>
    </section>
  </div>
</template>

<script lang="ts">
import {
  defineComponent, onMounted, Ref, ref
} from 'vue';
import Tool from './useGraph';

export default defineComponent({
  setup() {
    const dom: Ref<HTMLElement | null> = ref(null);
    onMounted(()=> {
      console.log(dom.value);
      Tool.useGraph(dom.value as HTMLElement);
    });
    return {
      dom
    };
  }
});
</script>
<style lang="scss" scoped>
@import '@scss/mixin.scss';

.intelligent {
  height: 100%;
  width: 100%;
  $infoHeight: 100px;
  .info {
    height: $infoHeight;
    .grid-content {
      width: 250px;
      height: 50px;
    }
    .bg-purple {
      background-color: #DCDFE6;
    }
  }
  .topology {
    width: 100%;
    @include heightCalc($infoHeight);
    // height: calc(100% - #{$infoHeight});
    box-sizing: border-box;
    padding: 20px;
    > div {
      width: 100%;
      height: 100%;
      position: relative;
    }
  }
}
</style>
